<template>
  <h1>toRaw和Markraw</h1>

  <ul>
    <li>{{ obj.id }}</li>
    <li>{{ obj.name }}</li>
  </ul>
  <button @click="changename">修改用户名</button>
  <button @click="changename2">修改用户名(toRaw)</button>
</template>

<script setup>
import { reactive,toRaw } from "vue"

const obj = reactive({
  id:"QF001",
  name:"张三"
})

function changename () {
  obj.name = '李四'
}

function changename2 () {
  const newObj = toRaw(obj)

  newObj.name = '王五'

  console.log(newObj.name)
}
</script>
